<template>
  <v-chart class="chart" :option="option" autoresize theme="dark" />
</template>

<script setup>
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { PieChart } from "echarts/charts";
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
} from "echarts/components";
import VChart, { THEME_KEY } from "vue-echarts";
import { ref, defineExpose, defineProps } from "vue";
import { graphic } from "echarts";

use([
  CanvasRenderer,
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
]);

const option = ref({
  backgroundColor: "rgba(0, 0, 0, 0)",
  title: [
    // {
    //   text: "处理率",
    //   x: "center",
    //   top: "32%",
    //   textStyle: {
    //     color: "#fff",
    //     fontSize: 20,
    //     fontWeight: "100",
    //   },
    // },
    {
      text: "60%",
      x: "center",
      top: "center",
      textStyle: {
        fontSize: 23,
        color: "#ffffff",
        foontWeight: "400",
      },
    },
  ],
  polar: {
    radius: ["44%", "50%"],
    center: ["50%", "50%"],
  },
  angleAxis: {
    max: 100,
    show: false,
  },
  radiusAxis: {
    type: "category",
    show: true,
    axisLabel: {
      show: false,
    },
    axisLine: {
      show: false,
    },
    axisTick: {
      show: false,
    },
  },
  series: [
    {
      type: "pie",
      radius: ["75%", "90%"],
      center: ["50%", "50%"],
      data: [
        {
          hoverOffset: 1,
          value: 995,
          name: "",
          itemStyle: {
            normal: {
              borderRadius: "15px;",

              // rom 0deg at 50% 50%,    360deg
              color: new graphic.RadialGradient(0, 1.5, 3, [
                {
                  offset: 0.2,
                  color: "#1CD27B",
                },
                {
                  offset: 0.5,
                  color: "#00F0FF",
                },
                {
                  offset: 0,
                  color: "#1CD27B",
                },
              ]),
            },
          },
          label: {
            show: false,
          },
          labelLine: {
            normal: {
              smooth: true,
              lineStyle: {
                width: 0,
              },
            },
          },
          hoverAnimation: false,
        },
        {
          label: {
            show: false,
          },
          labelLine: {
            normal: {
              smooth: true,
              lineStyle: {
                width: 0,
              },
            },
          },
          value: 20,
          hoverAnimation: false,
          itemStyle: {
            color: "rgba(255, 255, 255, 0.1)",
          },
        },
      ],
    },
    {
      name: "",
      type: "pie",
      startAngle: 90,
      radius: "75%",
      hoverAnimation: false,
      center: ["50%", "50%"],
      itemStyle: {
        normal: {
          labelLine: {
            show: false,
          },
          color: new graphic.RadialGradient(0.5, 0.5, 1, [
            {
              offset: 1,
              color: "rgba(55,70,130, 1)",
            },
            {
              offset: 0,
              color: "rgba(55,70,130, 0)",
            },
          ]),
          shadowBlur: 10,
          // shadowColor: 'rgba(55,70,130, 1)'
        },
      },
      data: [
        {
          value: 60,
        },
      ],
    },
  ],
});

const setData = (data) => {
  // const richs = {};
  // data.color.forEach((cl, index) => {
  //   richs["value" + index] = {
  //     width: 40,
  //     align: "right",
  //     color: cl,
  //     fontFamily: "Medium",
  //     fontSize: 19,
  //   };
  // });
  // const gap = data.total / 300;
  // const gapData = {
  //   name: "",
  //   value: gap,
  //   itemStyle: {
  //     color: "rgba(54,92,76)",
  //   },
  // };
  // const sData = [];
  // data.data.forEach((item, index) => {
  //   sData.push({
  //     ...item,
  //     itemStyle: {
  //       borderRadius: 100,
  //       color: data.color[index],
  //       borderWidth: 4,
  //       borderColor: "rgba(54,92,76)",
  //       // shadowBlur: 10,
  //       // shadowColor: data.color[index],
  //     },
  //   });
  //   if (data.data.length === 1) {
  //     sData.push(gapData);
  //   }
  // });
  option.value = {
    backgroundColor: "rgba(0, 0, 0, 0)",
    title: [
      {
        text: data.bfb,
        x: "center",
        top: "center",
        textStyle: {
          fontSize: 23,
          color: "#ffffff",
          foontWeight: "400",
        },
      },
    ],
    polar: {
      radius: ["44%", "50%"],
      center: ["50%", "50%"],
    },
    angleAxis: {
      max: 100,
      show: false,
    },
    radiusAxis: {
      type: "category",
      show: true,
      axisLabel: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
    },
    series: [
      {
        type: "pie",
        radius: ["75%", "90%"],
        center: ["50%", "50%"],
        data: [
          {
            hoverOffset: 1,
            value: data.value,
            name: "",
            itemStyle: {
              normal: {
                borderRadius: "15px;",
                // rom 0deg at 50% 50%,    360deg
                color: new graphic.RadialGradient(0, 1.5, 3, [
                  {
                    offset: 0.2,
                    color: "#1CD27B",
                  },
                  {
                    offset: 0.5,
                    color: "#00F0FF",
                  },
                  {
                    offset: 0,
                    color: "#1CD27B",
                  },
                ]),
              },
            },
            label: {
              show: false,
            },
            labelLine: {
              normal: {
                smooth: true,
                lineStyle: {
                  width: 0,
                },
              },
            },
            hoverAnimation: false,
          },
          {
            label: {
              show: false,
            },
            labelLine: {
              normal: {
                smooth: true,
                lineStyle: {
                  width: 0,
                },
              },
            },
            value: 100 - data.value,
            hoverAnimation: false,
            itemStyle: {
              color: "rgba(255, 255, 255, 0.1)",
            },
          },
        ],
      },
      {
        name: "",
        type: "pie",
        startAngle: 90,
        radius: "75%",
        hoverAnimation: false,
        center: ["50%", "50%"],
        itemStyle: {
          normal: {
            labelLine: {
              show: false,
            },
            color: new graphic.RadialGradient(0.5, 0.5, 1, [
              {
                offset: 1,
                color: "rgba(55,70,130, 1)",
              },
              {
                offset: 0,
                color: "rgba(55,70,130, 0)",
              },
            ]),
            shadowBlur: 10,
          },
        },
        data: [
          {
            value: 60,
          },
        ],
      },
    ],
  };
};
defineExpose({
  setData,
});
</script>

<style scoped>
.chart {
  height: 100px;
  width: 100px;
}
</style>
